<template>
  <!--金卡完善资料-->
  <div class="ziliao">
    <div class="content">
      <p>请与乘机证件一致 <img src="../../../assets/saoyisao.png" @click="goShibie()" v-if="identityType.identityType==1"></p>
      <span @click="goJump()">跳过 <img :src="src" alt="" height="10"></span>
    </div>
    <wv-group title="姓名">
      <wv-input placeholder="如英文名请按照Lastname(姓)/firstname(名)" v-model="privatedata.userName"></wv-input>
    </wv-group>
    <wv-group title="证件类型">
      <wv-cell
        title="证件类型"
        is-link
        :value="identityType.identityTypeDesc"
        @click.native="identityTypePickerShow = true"
      />
      <wv-picker
        :visible.sync="identityTypePickerShow"
        :columns="identityTypeColumns"
        value-key="identityTypeDesc"
        @confirm="confirmIdentityType"
      />
    </wv-group>

    <wv-group title="身份证号" v-if="identityType.identityType==1">
      <wv-input placeholder="请输入身份证号" type="text" v-model="privatedata.identityNo"></wv-input>
    </wv-group>

    <div v-if="identityType.identityType!=1">
      <div class="inlines" v-if="identityType.identityType!=5">
        <wv-group title="英文姓" class="xing">
          <wv-input placeholder="英文姓" v-model="privatedata.lastName"></wv-input>
        </wv-group>
        <wv-group title="英文名" class="names">
          <wv-input placeholder="英文名" v-model="privatedata.firstName"></wv-input>
        </wv-group>
      </div>
      <wv-group title="性别" v-if="identityType.identityType!=5">
        <wv-cell
          title="性别"
          is-link
          :value="sex.sexDesc"
          @click.native="sexPickerShow = true"
        />
        <wv-picker
          :visible.sync="sexPickerShow"
          value-key="sexDesc"
          :columns="sexColumns"
          @confirm="confirmSex"
        />
      </wv-group>
      <wv-group title="出生日期" v-model="privatedata.birthDate=birthDate">
        <wv-cell
          title="出生日期"
          :value="birthDate"
          is-link
          @click="openPicker('birthTimeDatePicker')"
        />
        <wv-datetime-picker
          type="date"
          ref="birthTimeDatePicker"
          :startDate="birthStartTimeDate"
          v-model="birthTimeDate"
          @confirm="onConfirm"
        />
      </wv-group>
      <wv-group title="国籍" class="names" v-if="identityType.identityType!=5">
        <wv-input placeholder="请填写国籍" v-model="privatedata.nationality"></wv-input>
      </wv-group>
      <wv-group title="签发地" class="names" v-if="identityType.identityType!=5">
        <wv-input placeholder="请填写证件签发国家/地区" v-model="privatedata.issueAt"></wv-input>
      </wv-group>
      <wv-group title="证件号">
        <wv-input placeholder="请输入证件号" type="text" v-model="privatedata.identityNo"></wv-input>
      </wv-group>
      <wv-group title="有效期" v-model="privatedata.expiryDate=expiryDate" v-if="identityType.identityType!=5">
        <wv-cell
          title="有效期"
          :value="expiryDate"
          is-link
          @click="openPicker('expiryTimeDatePicker')"
        />
        <wv-datetime-picker
          type="date"
          ref="expiryTimeDatePicker"
          v-model="expiryTimeDate"
          @confirm="onConfirm"
        />
      </wv-group>
    </div>
    <wv-group title="手机号">
      <wv-input placeholder="请输入手机号" type="number" v-model="privatedata.mobile"></wv-input>
    </wv-group>
    <wv-group title="备注" v-show="!jihuo" class="des">
      <wv-textarea placeholder="请输入备注" :rows="6" show-counter max-length="500"></wv-textarea>
    </wv-group>
    <div class="divider" v-if="accountGoods.isNeedSign==1&&accountGoods.signLocation==2">
      <p class="btn">
        请在下方签名
        <button @click="undo">回退</button>
        <button @click="clear()">清空</button>
      </p>
      <VueSignaturePad width="100%" height="260px" ref="signaturePad" style="margin-bottom: 50px"/>
    </div>
    <p class="offer" @click="goNext()">确定</p>
  </div>
</template>

<script type="text/ecmascript-6">
import {goPerfectVipcard, userInfo, imgOcrUpload, saveSign, getAccountGoodsInfo} from '../../../../test/unit/http'
import VDistpicker from 'v-distpicker'
import {wxApi} from '../../../../test/unit/flyme_weixin'
import {Picker, Toast} from 'we-vue'

export default {
  name: 'wanshanziliao',
  props: {},
  data() {
    return {
      src: require('../../../assets/arrow.png'),
      img: require('../../../assets/close.png'),
      pic: require('../../../assets/right.png'),
      jihuo: false,
      addInp: false,
      birthTimeDate: new Date(),
      expiryTimeDate: new Date(),
      identityTypePickerShow: false,
      birthStartTimeDate: new Date(new Date().setFullYear(new Date().getFullYear() - 100)),
      identityType: [{identityTypeDesc: '身份证', identityType: 1}],
      identityTypeColumns: [
        {
          values: [
            {identityTypeDesc: '身份证', identityType: 1},
            {identityTypeDesc: '护照', identityType: 2},
            {identityTypeDesc: '港澳通行证', identityType: 3},
            {identityTypeDesc: '台胞证', identityType: 4},
            {identityTypeDesc: '其他', identityType: 5}
          ],
          defaultIndex: 0
        }
      ],
      sexPickerShow: false,
      sex: [{sexDesc: '女', sex: 1}],
      sexColumns: [
        {
          values: [
            {sexDesc: '女', sex: 1},
            {sexDesc: '男', sex: 2}
          ],
          defaultIndex: 1
        }
      ],
      privatedata: {
        mobile: '',
        identityNo: '',
        userName: '',
        issueAt: '',
        lastName: '',
        firstName: '',
        birthDate: '',
        nationality: '',
        signStr: ''
      },
      accountGoods: {isNeedSign: 0, signLocation: 0}
    };
  },
  methods: {
    goJump() {
      this.$router.push({path: '/index'})
    },
    goShibie() {
      let that = this;
      wxApi.chooseImage({
        count: 1,
        callback: function (res, localIds) {
          let imgId = res.serverId;
          let params = {
            'imgId': imgId,
            'identityType': that.identityType.identityType
          };
          imgOcrUpload(params).then(res => {
            console.log(res);
            if (res.code == 100) {
              let cardInfo = res.object;
              that.privatedata['identityNo'] = cardInfo.identityNo;
              that.privatedata['userName'] = cardInfo.userName;
              if (identityType == 2) {
                that.privatedata['issueAt'] = cardInfo.issueAt;
              }
            } else {
              Toast.text("识别出错")
            }
          })
        }
      });
    },
    checkFrom() {
      let privatedata = this.privatedata;
      let msg = {};
      if (this.$myUtils.isNull(privatedata.userName)) {
        msg['result'] = false;
        msg['info'] = '请输入真实姓名';
        return msg;
      }
      if (this.$myUtils.isNull(privatedata.identityType)) {
        msg['result'] = false;
        msg['info'] = '请选择证件类型';
        return msg;
      }
      if (privatedata.identityType != 1) {
        if (privatedata.identityType == 5) {
          if (this.$myUtils.isNull(privatedata.birthDate)) {
            msg['result'] = false;
            msg['info'] = '请选择出生日期';
            return msg;
          }
        }
      }
      if (privatedata.identityType == 1) {
        if (this.$myUtils.isNull(privatedata.identityNo)) {
          msg['result'] = false;
          msg['info'] = '请输入身份证号';
          return msg;
        }
        if (!this.$myUtils.isCardNo(privatedata.identityNo)) {
          msg['result'] = false;
          msg['info'] = '请输入合法的身份证号码';
          return msg;
        }
      } else {
        if (this.$myUtils.isNull(privatedata.identityNo)) {
          msg['result'] = false;
          msg['info'] = '请输入证件号';
          return msg;
        }
      }
      if (this.$myUtils.isNull(privatedata.mobile)) {
        msg['result'] = false;
        msg['info'] = '请输入手机号';
        return msg;
      }
      if (this.accountGoods.isNeedSign == 1 && this.accountGoods.signLocation == 2) {
        const {isEmpty, data} = this.$refs.signaturePad.saveSignature();
        if (isEmpty) {
          msg['result'] = false;
          msg['info'] = '请先滑至屏幕最下方进行签名确认';
          return msg;
        }
      }
      msg['result'] = true;
      msg['info'] = '校验成功';
      return msg;
    },
    goPerfect(params) {
      let type = this.$route.query.type;
      goPerfectVipcard(params).then(res => {
        console.log(res);
        if (res.code == 100) {
          let accountGoods = res.object;
          let isTiyan = accountGoods.isTiyan;
          if (isTiyan == 0) {
            this.$router.push({
              path: '/huiyuandetail',
              query: {accountGoodsId: accountGoods.accountGoodsId, type: type}
            })
          }
          if (isTiyan == 1) {
            this.$router.push({
              path: '/tiyanquandetail',
              query: {accountGoodsId: accountGoods.accountGoodsId}
            })
          }
        } else {
          Toast.fail(res.info);
        }
      })
    },
    goNext() {
      let checkResult = this.checkFrom();
      if (!checkResult.result) {
        Toast.text(checkResult.info);
        return;
      }
      console.info("checkResult", checkResult);
      let accountGoodsId = this.$route.query.accountGoodsId;
      this.privatedata['accountGoodsId'] = accountGoodsId;
      if (this.accountGoods.isNeedSign == 1 && this.accountGoods.signLocation == 2) {
        const {isEmpty, data} = this.$refs.signaturePad.saveSignature();
        this.privatedata['signStr'] = data;
      }
      this.goPerfect(this.privatedata);
    },
    onChange(picker, value) {
      this.$nextTick(() => {
        console.log(picker.getValues());
        console.log(value)
      })
    },
    confirmIdentityType(picker) {
      this.identityType = picker.getValues()[0];
      this.privatedata = {};
      this.privatedata['identityType'] = this.identityType.identityType
    },
    confirmSex(picker) {
      this.sex = picker.getValues()[0];
      this.privatedata['sex'] = this.sex.sex
    },
    openPicker(ref) {
      this.$refs[ref].open()
    },
    onConfirm(value) {
      let message = '';
      if (value !== null && typeof value === 'object') {
        let year = value.getFullYear();
        let month = value.getMonth() + 1;
        let date = value.getDate();
        let hour = value.getHours();
        let minute = value.getMinutes();
        message = `${year}-${month}-${date} ${hour}:${minute}`
      } else {
        message = value
      }
    },
    undo() {
      this.$refs.signaturePad.undoSignature();
    },
    clear() {
      this.$refs.signaturePad.clearSignature();
    },
  },
  created() {
    wxApi.init();
    let accountGoodsId = this.$route.query.accountGoodsId;
    getAccountGoodsInfo({accountGoodsId: accountGoodsId}).then(res => {
      console.info(res)
      if (res.code == 100) {
        this.accountGoods = res.object
      } else {
        Toast.fail(res.info);
      }
    })
    this.identityType = this.identityTypeColumns[0].values[0];
    this.privatedata['identityType'] = this.identityType.identityType;
    this.privatedata['dataType'] = 1;
    userInfo({}).then(res => {
      console.log(res);
      if (res.code == 100) {
        let account = res.object.account;
        this.privatedata['mobile'] = account.accountName;
      }
    })
  },
  computed: {
    birthDate: {
      get: function () {
        let value = this.birthTimeDate;
        let message = '';
        if (value !== null && typeof value === 'object') {
          let year = value.getFullYear();
          let month = value.getMonth() + 1;
          let date = value.getDate();
          message = `${year}-${month}-${date}`;
        } else {
          message = value;
        }
        return message;
      },
      set: function (newValue) {
        return newValue;
      }
    },
    expiryDate: {
      get: function () {
        let value = this.expiryTimeDate;
        let message = '';
        if (value !== null && typeof value === 'object') {
          let year = value.getFullYear();
          let month = value.getMonth() + 1;
          let date = value.getDate();
          message = `${year}-${month}-${date}`;
        } else {
          message = value;
        }
        return message;
      },
      set: function (newValue) {
        return newValue;
      }
    }
  },
  components: {
    VDistpicker
  }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
.des {
  padding-bottom: 65px;
}

.inlines {
  display: flex;
}

.xing, .names {
  flex: 1;
}

.distpicker-address-wrapper {
  height: 300px;
  overflow: auto;
}

.content {
  display: flex;

  p {
    flex: 0 190px;
    font-size: 18px;
    color: #111;
    padding: 25px 0 0 10px;
    display: inline-flex;

    img {
      margin-left: 10px;
      height: 28px;
      width: 28px;
    }
  }

  span {
    position: absolute;
    top: 20px;
    right: 20px;
    color: rgba(255, 255, 255, 0.5);
    background-color: rgba(0, 0, 0, 0.2);
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 12px;

    img {
      vertical-align: middle;
      margin-bottom: 2px;
    }
  }
}

.guoji {
  text-align: left;
  padding: 10px 15px 10px;

  p:first-child {
    color: #2e94f0;
    font-size: 14px;
  }

  p:last-child {
    font-size: 17px;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    color: #666;

    img {
      float: right;
      margin-top: 9px;
    }
  }
}

.offer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-image: linear-gradient(to left, #4c92ed, #61beec);
  height: 50px;
  line-height: 50px;
  color: #fff;
  z-index: 999;
}

.bg {
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 50px;
}

.model .modelContent {
  background-color: #fff;
  border-radius: 8px;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -43%;
  margin-top: -111px;
  z-index: 2;
  padding: 30px 10px 20px;
  width: 80%;

  img {
    position: absolute;
    right: 10px;
    top: 10px
  }

  .list {
    height: 100px;
    overflow-y: auto;
    margin-bottom: 20px;
    padding-bottom: 10px;
    text-align: left;
    padding-left: 20px;

    ul {
      overflow: hidden;

      li {
        line-height: 30px;
      }
    }
  }

  .btn {
    button {
      height: 42px;
      line-height: 42px;
      color: #fff;
      outline: none;
      border: none;
      width: calc(50% - 20px);
      border-radius: 8px;
    }

    :first-child {
      background-color: #ccc;
      margin-right: 20px;
    }

    :last-child {
      background-color: #2f95f0;
    }
  }

}

.divider {
  background-color: #eee;
  height: 20px;
  width: 100%;
  text-align: left;
  padding: 3px;

  .btn {
    button {
      color: #fff;
      border: none;
      width: calc(35% - 50px);
      margin-left: 30px;
    }

    :last-child {
      background-color: #2f95f0;

    }

    :first-child {
      background-color: #ccc;
      margin-right: 20px;
    }
  }
}

</style>
